<template>
	<view>
		<view class="tabs">
			<view :class="['tab', current === 0 ? 'active': '']" @click="tab(0)">待领取<view :class="['line', current === 0 ? 'yellow': '']"></view></view>
			<view :class="['tab', current === 1 ? 'active': '']" @click="tab(1)">已领取<view :class="['line', current === 1 ? 'yellow': '']"></view></view>
			<button type="default" hover-class="back" @click="back">返回</button>
		</view>
		
		<swiper class="swiper" :style="{height: getHeight}" :duration="300" @change='swiperChange' :current="current">
			<swiper-item>
				<!--  待领取 -->
				<view class="none" v-if="giftList.length === 0">暂无礼品~</view>
				<view class="goods" v-for="item in giftList" :key="item.id">
					<view class="info">
						<view class="info-left">
							<text>{{ item.name }}</text>
							<text v-if="item.gift_type===1">校长特批</text>
							<text v-else>签约礼品</text>
							<text>价值￥{{ item.price }}</text>
						</view>
						<image :src="item.image" mode="" class="img"></image>
					</view>
					<view class="goods-line">
						<view></view>
					</view>
					<view class="qrcode">
						<image :src="item.qrcode" mode=""></image>
						<view>
							<text class="iconfont icondingwei1"></text>
							<text>{{ item.store_name ? item.store_name : '金宝贝中心' }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<!--  已领取 -->
				<view class="none" v-if="giftList.length === 0">暂无礼品~</view>
				<view class="goods" v-for="item in giftList" :key="item.id">
					<view class="info">
						<view class="info-left">
							<text>{{ item.name }}</text>
							<text v-if="item.gift_type===1">校长特批</text>
							<text v-else>签约礼品</text>
							<text>价值￥{{ item.price }}</text>
						</view>
						<image :src="item.image" mode="" class="img"></image>
					</view>
					<view class="goods-line">
						<view></view>
					</view>
					<view class="qrcode">
						<image :src="item.qrcode" mode="" style="filter: opacity(0.5);"></image>
						<view>
							<text class="iconfont icondingwei1"></text>
							<text>{{ item.store_name ? item.store_name : '金宝贝中心' }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { signVerifyList } from '../../api/serviceApi.js'
	export default {
		data () {
			return {
				current: 0, // 待领取0或者已领取1，也是 核销状态(0-未核销 1-已核销) 
				page: 1,
				total: 0,
				giftList: []
			}
		},
		onLoad() {
			this._signVerifyList() // 核销礼品列表
		},
		computed: {
			getHeight() {
				if (this.giftList.length === 0) return 100 + 'vh'
				return 790 * this.giftList.length + 'rpx'  // 770 *n + n*20
			}
		},
		onReachBottom() {
			if (this.giftList.length === this.total) return
			this.page ++
			this._signVerifyList() // 核销礼品列表
		},
		onPullDownRefresh() {
			this.page = 1
			this.total = 0
			this.giftList = []
			setTimeout(() => {
				// 核销礼品列表
				this._signVerifyList(() => {
					uni.stopPullDownRefresh()
				})
			}, 300)
		},
		methods: {
			swiperChange(e) {
				// console.log(e)
				this.current = e.detail.current
				this.giftList = []
				this.total = 0
				this.page = 1
				this._signVerifyList()
			},
			tab(index) {
				// console.log(index)
				this.current = index
			},
			back() {
				uni.navigateTo({
					url: '../service/customerSignList'
				})
			},
			async _signVerifyList(callback) {
				let data = {p: this.page, length: 10, status: this.current}
				const res = await signVerifyList(data)
				console.log(res)
				// this.giftList = res.data.data.list
				this.giftList = [...this.giftList, ...res.data.data.list]
				this.total = res.data.data.total
				callback && callback()
			}
 		}
	}
</script>

<style lang="scss">
	uni-page-body {
		font-family: PingFangSC-Semibold;
		// background-image: linear-gradient(#fff, #ebebeb, #fafafa);
		height: 100vh;
	}
	.tabs {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		padding-left: 35rpx;
		z-index: 2;
		background-color: #fff;
		// background-image: linear-gradient(#fff, #ebebeb, #fafafa);
		width: 100%;
		height: 150rpx;
		.tab {
			font-size: 30rpx;
			color: #a7a7a7;
			transition: all 0.3s ease;
			position: relative;
			.line {
				width: 0;
				height: 6rpx;
				background-color: trasnparent;
				border-radius: 3rpx;
				position: absolute;
				left: 50%;
				top: 120%;
				transform: translate(-50%, -50%);
				transition: width 0.3s ease;
			}
		}
		.tab:nth-child(2) {
			margin-left: 52rpx;
		}
		button {
			width: 180rpx;
			height: 80rpx;
			background-color: #fedb0d;
			border-radius: 40rpx;
			line-height: 80rpx;
			font-family: SourceHanSansCN-Medium;
			font-size: 32rpx;
			color: #010101;
			margin-left: 230rpx;
		}
		.back {
			opacity: 0.8;
		}
		.active {
			color: #191919;
			font-size: 38rpx;
			transition: all 0.3s ease;
			.yellow {
				background-color: #fedb0d;
				width: 40rpx;
			}
		}
	}
	
	.swiper {
		height: auto;
		margin-top: 130rpx;
		padding: 37rpx 35rpx 80rpx;
		.none {
			color: #a7a7a7;
			text-align: center;
			line-height: 75vh;
			font-size: 28rpx;
			letter-spacing: 1px;
		}
		.goods {
			width: 100%;
			height: 710rpx;
			background-color: #fedb0d;
			margin-bottom: 40rpx;
			padding: 20rpx 0;
			.info,.qrcode {
				width: 646rpx;
				height: 224rpx;
				background-color: #fff;
				margin: 0 auto;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				&-left {
					display: flex;
					flex-direction: column;
					font-family: SourceHanSansCN-Regular;
					flex: 1;
					text:nth-child(1) {
						font-size: 30rpx;
						color: #1a1a1a;
						padding-bottom: 23rpx;
					}
					text:nth-child(2) {
						font-size: 24rpx;
						color: #999;
						padding-bottom: 38rpx;
					}
					text:nth-child(3) {
						font-size: 24rpx;
						color: #191919;
					}
				}
				.img {
					width: 153rpx;
					height: 142rpx;
				}
			}
			.qrcode {
				height: 488rpx;
				display: flex;
				flex-direction: column;
				image {
					margin-top: 84rpx;
					width: 220rpx;
					height: 220rpx;
				}
				view {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #999;
					padding-top: 50rpx;
					.iconfont {
						font-size: 26rpx;
						padding-right: 5rpx;
					}
				}
			}
			.goods-line {
				width: 646rpx;
				margin: 0 auto;
				background-color: #fff;
				position: relative;
				view {
					width: 590rpx;
					height: 1rpx;
					margin: 0 auto;
					background-color: #e6e6e6;
				}
				view::before,view::after {
					content: '';
					width: 26rpx;
					height: 26rpx;
					border-radius: 50%;
					background-color: #fedb0d;
					position: absolute;
					top: -14rpx;
				}
				view::before {
					left: -14rpx;
				}
				view::after {
					right: -14rpx;
				}
			}
		}
	}
	
</style>
